import React from 'react'
import PureRenderMixin from 'react-addons-pure-render-mixin'
import {LoadMoreDom} from './style'

class LoadMore extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
  }
  render() {
    return (
      <LoadMoreDom ref="wrapper">
        {
          this.props.isLoadingMore
            ? <span>加载中...</span>
            : <span onClick={this.loadMoreHandle.bind(this)}>加载更多</span>
        }
      </LoadMoreDom>
    )
  }
  loadMoreHandle() {
    // 执行传输过来的
    this.props.loadMoreFn();
  }
  componentDidMount() {
    // 使用滚动时自动加载更多
    const loadMoreFn = this.props.loadMoreFn
    const wrapper = this.refs.wrapper
    let timeoutId
    function callback() {
      const top = wrapper.getBoundingClientRect().top
      const windowHeight = window.screen.height
      if (top && top < windowHeight) {
        // 证明 wrapper 已经被滚动到暴露在页面可视范围之内了
        loadMoreFn()
      }
    }
    window.addEventListener('scroll', function () {
      if (this.props.isLoadingMore) {
        return
      }
      if (timeoutId) {
        clearTimeout(timeoutId)
      }
      timeoutId = setTimeout(callback, 50)
    }.bind(this), false);
  }
}

export default LoadMore